<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }
    </style>
</head>

<body>
    <!-- name是data的数据可以使用 -->
    <!-- name1是全局变量，不能使 -->
    <!-- v-for 用于渲染 -->
    <!-- v-if 用于判断 控制标签是渲染否不选-->
    <!-- v-show 用于判断 控制标签是否展示（display）-->
    <!-- v-html -->
    <!-- v-text =={{ele}}   <b>你好</b>-->
    <!-- v-on  ==  @    简写：用于绑定事件 -->
    <!-- v-bind  ==  :-->
    <div id="app">
        {{name}}
        <!-- {{message}}
        {{ 0 ? "存在":"不存在"}} -->

        <!-- <ul>
            <li v-for="(item,index) in arr">
                <b class="red">{{item}}</b>
                <i>{{index}}</i>
            </li>
        </ul> -->

        <ul>
            <li v-for="(item,index) in arr">
                <!-- 下标是2的显示 -->
                <!-- 下标是3的显示13 -->
                <!-- 除了以上的其他的都是 lalala -->
                <b v-if="index==2">{{item}}</b>
                <b v-else-if="index==3">13</b>
                <b v-else>lalala</b> -->
                <i>{{index}}</i>
            </li>
        </ul>

        <button v-on:click="show=true">打开</button>
        <div class="mask" v-show="show">
            <span @click="show=false">×</span>
            <p>我是弹窗</p>
        </div>

        <ul 
            v-for="(item,index) in list"
            @click="activeindex=index"
            v-bind:style="{color:activeindex==index ? 'green' : ''}">
            {{item.title}}</ul>
        <div>
            <p v-for="item in list[activeindex].child">
                {{item}}
            </p>
        </div>



    </div>

    <script src="./vue.js"></script>
    <script>
        const name1 = "李四"

        const vue = new Vue({
            el: "#app",
            data: {
                message: 'hello Vue',
                name: '张三',
                arr: [1, 2, 3, 4],
                ele: "<b>你好</b>",
                show: false,
                activeindex: 0,//默认下标
                list: [{
                    title: '标题1',
                    child: ['杨旭', '情书', 'tmg', '王荣喜']
                }, {
                    title: '标题2',
                    child: ['账号借钱', '张浩杰', 'tmg', '一个亿']
                }, {
                    title: '标题3',
                    child: ['双十一', '依旧', '一个人', '剁手']
                },]

            }
        })
    </script>

</html>